import { HOVER_EHGIT, HOVER_WIDTH } from "./config";
import { Data } from "./data";
import { SvgBase } from "./svgBase";
import { getXY, UUID } from "./utils";

class Main {
    private _input = document.createElement('input');
    constructor() {
        this.init();
    }
    setInputPos(x: number, y: number) { }

    init() {
        const { innerWidth, innerHeight } = window;
        const base = new SvgBase(document.body, innerWidth - 10, innerHeight - 10);
        const datas = new Data(base);
        {
            datas.save({
                id: UUID(),
                x: 40,
                y: 520,
                w: 100,
                h: 50,
                parentId: '',
                children: {
                    ids: ['2', '3'],
                    mh: 0,
                    mw: 0
                }
            });
            datas.save({
                id: UUID(),
                x: 0,
                y: 0,
                w: 100,
                h: 50,
                parentId: '1',
                children: {
                    ids: ['4', '5'],
                    mh: 0,
                    mw: 0
                }
            });
            datas.save({
                id: UUID(),
                x: 0,
                y: 0,
                w: 100,
                h: 120,
                parentId: '1',
                children: {
                    ids: [],
                    mh: 0,
                    mw: 0
                }
            });
            datas.save({
                id: UUID(),
                x: 0,
                y: 0,
                w: 100,
                h: 50,
                parentId: '2',
                children: {
                    ids: [],
                    mh: 0,
                    mw: 0
                }
            });
            datas.save({
                id: UUID(),
                x: 0,
                y: 0,
                w: 100,
                h: 250,
                parentId: '2',
                children: {
                    ids: [],
                    mh: 0,
                    mw: 0
                }
            });
            // datas.save({
            //     id: UUID(),
            //     x: 0,
            //     y: 0,
            //     w: 100,
            //     h: 50,
            //     parentId: '2',
            //     children: {
            //         ids: [],
            //         mh: 0,
            //         mw: 0
            //     }
            // });
            // datas.save({
            //     id: UUID(),
            //     x: 0,
            //     y: 0,
            //     w: 100,
            //     h: 50,
            //     parentId: '3',
            //     children: {
            //         ids: [],
            //         mh: 0,
            //         mw: 0
            //     }
            // });
            // datas.save({
            //     id: UUID(),
            //     x: 0,
            //     y: 0,
            //     w: 100,
            //     h: 50,
            //     parentId: '4',
            //     children: {
            //         ids: [],
            //         mh: 0,
            //         mw: 0
            //     }
            // });
            // datas.save({
            //     id: UUID(),
            //     x: 0,
            //     y: 0,
            //     w: 200,
            //     h: 200,
            //     parentId: '5',
            //     children: {
            //         ids: ['10', '15'],
            //         mh: 0,
            //         mw: 0
            //     }
            // });
            // datas.save({
            //     id: UUID(),
            //     x: 0,
            //     y: 0,
            //     w: 100,
            //     h: 230,
            //     parentId: '9',
            //     children: {
            //         ids: ['11', '12'],
            //         mh: 0,
            //         mw: 0
            //     }
            // });
            // datas.save({
            //     id: UUID(),
            //     x: 0,
            //     y: 0,
            //     w: 100,
            //     h: 120,
            //     parentId: '10',
            //     children: {
            //         ids: [],
            //         mh: 0,
            //         mw: 0
            //     }
            // });
            // datas.save({
            //     id: UUID(),
            //     x: 0,
            //     y: 0,
            //     w: 100,
            //     h: 50,
            //     parentId: '10',
            //     children: {
            //         ids: [],
            //         mh: 0,
            //         mw: 0
            //     }
            // });
            // datas.save({
            //     id: UUID(),
            //     x: 0,
            //     y: 0,
            //     w: 100,
            //     h: 100,
            //     parentId: '1',
            //     children: {
            //         ids: ['14'],
            //         mh: 0,
            //         mw: 0
            //     }
            // });
            // datas.save({
            //     id: UUID(),
            //     x: 0,
            //     y: 0,
            //     w: 100,
            //     h: 50,
            //     parentId: '13',
            //     children: {
            //         ids: [],
            //         mh: 0,
            //         mw: 0
            //     }
            // });
            // datas.save({
            //     id: UUID(),
            //     x: 0,
            //     y: 0,
            //     w: 250,
            //     h: 250,
            //     parentId: '9',
            //     children: {
            //         ids: [],
            //         mh: 0,
            //         mw: 0
            //     }
            // });
        }
        datas.calculate();
        base.svg.addEventListener('mousemove', (e: MouseEvent) => {
            settingCursor(e);
        });
        // 设置鼠标样式
        function settingCursor(e: MouseEvent | Event) {
            const { x, y } = getXY(e);
            const padding = HOVER_EHGIT + HOVER_WIDTH;
            const id = datas.getIdByXY(x, y, padding);
            if (id) {
                document.body.style.cursor = 'pointer';
                datas.showHoverEles(id);
            } else {
                document.body.style.cursor = 'default';
                datas.hideHoverEles();
            }
        }
        base.svg.addEventListener('click', (e) => {
            settingCursor(e);
        });
        // 双击事件 显示可编辑的输入框
        base.svg.addEventListener('dblclick', (e) => {
            const { x, y } = getXY(e);
            const id = datas.getIdByXY(x, y);
            console.log('dblclick', id);
        });
        base.svg.addEventListener('wheel', (e: WheelEvent) => {
            const { deltaX, deltaY } = e;
            const x = deltaX;
            const y = deltaY;
            for (const id in datas.dataObj) {
                datas.dataObj[id].x -= x;
                datas.dataObj[id].y -= y;
            }
            datas.calculate();
            settingCursor(e);
        });
        window.addEventListener('resize', () => {
            const { innerWidth, innerHeight } = window;
            base.resize(innerWidth - 10, innerHeight - 10);
            datas.calculate();
        });
    }
}

new Main();